<template>
  <view v-if="isStation" class="hb-w-full hb-h-19 hb-flex-shrink-0"></view>
  <view
    class="hb-px-4 hb-fixed hb-left-0 hb-z-99 hb-flex hb-w-screen hb-justify-center hb-gap-4"
    :class="{
      'hb-bg-white': showBgColor,
      'hb-box-shadow-base': showBgColor,
      'hb-py-3': !isNewIphone(),
      'hb-py-4': isNewIphone(),
    }"
    :style="{ bottom: bottom + 'px' }"
  >
    <TmButton
      v-if="!hideCancelBtn"
      class="hb-flex-1"
      :loading="cancelLoading"
      :round="22"
      :margin="[0, 0]"
      :padding="[0]"
      :shadow="0"
      block
      :label="cancelBtnLabel"
      :transparent="true"
      :height="88"
      :follow-theme="false"
      :font-color="cancelBtnColor"
      :border-color="cancelBtnBorderColor"
      form-type="reset"
      :border="1"
      @click="emit('cancel')"
    ></TmButton>
    <TmButton
      class="hb-flex-1"
      :loading="submitLoading"
      :round="22"
      :margin="[0, 0]"
      :padding="[0]"
      :shadow="0"
      :icon="submitBtnIcon"
      block
      :label="submitBtnLabel"
      :height="88"
      :follow-theme="!submitBtnColor"
      :color="submitBtnColor"
      form-type="submit"
      :button-id="WxShareButtonIdEnum.BottomSubmit"
      :open-type="submitBtnOpenType"
      @click="emit('submit')"
    ></TmButton>
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import TmButton from '@/tmui/components/tm-button/tm-button.vue';
  import { isNewIphone } from '@/utils/is';
  import { WxShareButtonIdEnum } from '@/enums/PublicEnum';

  defineProps({
    /** 提交按钮配置 */
    submitBtnLabel: propTypes.string.def('提交'),
    submitBtnColor: propTypes.string,
    submitLoading: propTypes.bool.def(false),
    submitBtnOpenType: String as PropType<InstanceType<typeof TmButton>['openType']>,
    /** 取消按钮配置 */
    cancelBtnLabel: propTypes.string.def('取消'),
    cancelBtnColor: propTypes.string.def('#333'),
    cancelBtnBorderColor: propTypes.string.def('#CCCCC8'),
    cancelLoading: propTypes.bool.def(false),
    hideCancelBtn: propTypes.bool.def(true),
    // 站位
    isStation: propTypes.bool.def(true),
    /** 是否显示背景色 */
    showBgColor: propTypes.bool.def(true),
    bottom: propTypes.number.def(0),
    /** 提交按钮图标 */
    submitBtnIcon: propTypes.string.def(''),
  });
  const emit = defineEmits(['cancel', 'submit']);
</script>

<style scoped></style>
